<template>
  <div class="login-container" :style="{ backgroundImage: `url(${bgImage})` }">
    <div class="login-box">
      <!-- 标题部分使用第二张图的布局结构 -->
      <div class="header">
        <div class="menu-item">
          <img :src="icon1" alt="系统图标" class="icon" />
        </div>
        <!-- 使用第三张图的分割线 -->
        <!-- <img alt="分割线" class="divider" /> -->
      </div>

      <!-- 登录表单 -->
      <form @submit.prevent="handleLogin">
        <!-- 用户名输入框 -->
        <div class="input-group">
          <!-- 图标容器 -->
          <div class="icon-wrapper">
            <img :src="userIcon" class="input-icon" alt="用户图标" />
          </div>

          <!-- 输入区域 -->
          <input
            type="text"
            class="form-input"
            v-model="form.username"
            placeholder="请输入用户名"
          />
        </div>

        <!-- 密码输入框 -->
        <div class="input-group">
          <!-- 图标容器 -->
          <div class="icon-wrapper">
            <img :src="lockIcon" class="input-icon" alt="密码图标" />
          </div>

          <!-- 输入区域 -->
          <input
            type="password"
            class="form-input"
            v-model="form.password"
            placeholder="请输入密码"
          />
        </div>

        <button type="submit" class="login-btn">登录</button>
      </form>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { ElMessage } from 'element-plus'
import { useRouter } from 'vue-router'
import { setItem } from '@/utils/storage'
import { useUserStore } from '@/stores/user'
const router = useRouter()
// 切图路径（请根据实际文件路径调整）
const bgImage = new URL('@/assets/login_bg.jpg', import.meta.url).href
const icon1 = new URL('@/assets/icon1.png', import.meta.url).href
const lockIcon = new URL('@/assets/lock.png', import.meta.url).href
const userIcon = new URL('@/assets/user.png', import.meta.url).href
const form = ref({
  username: '',
  password: '',
})

const userStore = useUserStore()

const handleLogin = async () => {
  try {
    // 处理登录逻辑
    await userStore.userLogin(form.value).then(()=>{
      ElMessage.success('登录成功')
      setTimeout(()=>{
        router.push('/home')
      },500)
    })
  } catch (error) {
    console.log("🚀 ~ handleLogin ~ error:", error)
    // 网络错误/系统错误处理
  }
}
</script>

<style scoped>
.login-container {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-size: cover; /* 或 100% 100% 根据设计需求 */
  background-position: center top; /* 重点显示左侧几何结构 */
  background-repeat: no-repeat;
}

.login-box {
  position: absolute;
  right: 10%;
  top: 55%;
  transform: translateY(-50%);
  width: 580px;
  height: 560px;
  background: url('@/assets/login_box.png') no-repeat left top;
  padding: 4.5rem 7rem;
  box-sizing: border-box;
}

.header {
  margin-bottom: 2rem;
  text-align: center;
}

.menu-item {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 50px;
}


.title {
  font-size: 30px;
  font-family:
    'YouSheBiaoTiHei',
    -apple-system,
    BlinkMacSystemFont,
    'Segoe UI',
    sans-serif;
  font-weight: 400; /* 对应bold字重 */
  color: #2d5d9b;
  margin: 0;
}

/* .divider {
  width: 100%;
  height: 2px;
  margin: 1rem 0;
} */

.input-group {
  display: flex;
  align-items: center;
  background: #f8f8f8;
  border-radius: 4px;
  padding: 0.8rem;
  margin: 2rem 0;
  position: relative;
}

/* 图标容器 */
.icon-wrapper {
  display: flex;
  align-items: center;
  padding: 0 12px;
}

.input-icon {
  width: 20px;
  height: 20px;
  filter: brightness(0) saturate(100%) invert(32%) sepia(13%) saturate(2129%) hue-rotate(180deg);
}

/* 竖线分隔符 */
.divider-line {
  color: #456eb5;
  font-weight: 300;
  padding: 0 12px;
  opacity: 0.6;
}

/* 输入框样式 */
.form-input {
  flex: 1;
  border: none;
  background: transparent;
  font-size: 14px;
  color: #2c3e50;
  padding: 6px 0;
}

.form-input::placeholder {
  color: #95a5a6;
  letter-spacing: 0.5px;
}

input {
  flex: 1;
  border: none;
  outline: none;
  font-size: 16px;
  background: transparent;
}

.login-btn {
  width: 100%;
  padding: 12px;
  background: #2E5DB7;
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 16px;
  cursor: pointer;
  transition: background 0.3s ease;
  margin-top: 30px;
}

.login-btn:hover {
  background: #1557b0;
}
</style>
